<template lang="pug">
    div
        h1 举报管理
        el-table(:data="data.data")
            el-table-column(prop="report_id",   label="举报编号")
            el-table-column(label="通告详情")
                template(slot-scope="scope")
                    Tooltip(placement="right", :transfer="true", @on-popper-show="show(scope.row.notice_id)")
                        div(slot="content", style="white-space: normal")
                            div(v-if="scope.row.notice_id === tooltip.notice_id")
                                p 标题：{{tooltip.title}}
                                p 价格：{{tooltip.price}}
                                p 内容：{{tooltip.content}}
                                p 微信：{{tooltip.wx}}
                                p 状态：{{tooltip.state | state}}
                                p 作者：{{tooltip.create_user_nickname}}
                                p 标签：{{tooltip.tag_name}}
                            div(v-else) 加载中，等会
                        Button 鼠标放这里
            el-table-column(prop="content",     label="举报内容")
            el-table-column(label="相关图片", width="150", fixed="right")
                template(slot-scope="scope")
                    img.image(v-for="(src, index) in JSON.parse(scope.row.img_url_arr)", :key="index", :src="src")
            el-table-column(label="操作")
                template(slot-scope="scope")
                    Button.button(type="info",      @click="update(scope.row, 1)") 通过
                    Button.button(type="default",   @click="update(scope.row, -1)") 不通过
        Page(:total="data.total_count", @on-change="index")

</template>

<script>
    export default {
        data() {
            return {
                page: 1,
                data: {
                    data: [],
                    total_count: 0,
                },
                tooltip: {
                    notice_id: 0,
                    title: '',
                    price: 0,
                    content: '',
                    tag_id: '',
                    wx: '',
                    state: '',
                    create_user_id: '',
                    create_time: '',
                    update_time: '',
                    create_user_nickname: '',
                    tag_name: '',
                }
            }
        },

        methods: {
            async index(page = 1) {
                this.data = await this.$http.post('tools_report/getReportList', {page_index: page - 1, page_size: 10});
                this.page = page;
            },

            // 显示某一个通告的详情
            async show(notice_id) {
                if (this.tooltip.notice_id !== notice_id) {
                    this.tooltip = await this.$http.post('tools_notice/getDetail', {notice_id});
                }
            },

            async update(data, status) {
                const {report_id, notice_id} = data;

                try {
                    await this.$confirm(`确认 ${status === 1 ? '通过' : '不通过'}该举报？`, '举报处理确认');
                    await this.$http.post('tools_report/setReportState', {report_id, notice_id, status});
                    this.index();
                } catch (e) {}
            }
        },
        created() {
            this.index();
        }
    }
</script>

<style lang="stylus" scoped>
    img
        max-width 100%
</style>
